<template>
  <div class="parent">
    <h2>使用 emits 传递父子组件数据</h2>
    <button @click="counterAdd">add</button>
    <span v-if="toy">从子组件获取 {{ toy }}</span>
    <sub-comp />
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import SubComp from "./SubComp.vue";
import { mittEmit, mittOn, mittOff } from "../../utils/emitter";

const counter = ref(10);
const toy = ref("");

mittOn("toy", (v: string) => {
  toy.value = v;
});

function counterAdd() {
  counter.value += 1;
  mittEmit("count", counter.value);
}

onMounted(() => {
  mittEmit("count", counter.value);
});

onUnmounted(() => {
  mittOff("toy");
});
</script>

<style scoped>
@import "../common.css";
</style>
